by_solo

Нашёл интересные сайтики:
http://bylovein.ru
http://yalover.ru
http://lovescyy.ru
http://lovegrade.ru
http://loveiyou.ru

Моё мнение - это круто. Если ещё не видели, обязательно посмотрите.



Альтернатива


Промо-ролик


Запрещённая реклама года молодёжи

Это второй пост из серии статей, посвящённых CSS3. В данной статье мы будем рассматривать границы. Каждый, кто использует CSS, знаком со свойствами бордеров. Их использование - это отличный способ структурировать контент страницы, создать эффекты вокруг изображений и т.п.

CSS3 поднимает бордеры на качественно новый уровень с возможностью использовать градиенты, скруглённые углы, тени и бордеры состоящие из изображений. Рассмотрим все эти усовершенствования более детально, с использованием примеров, где это возможно.

Скругление границ

Достижение скругления углов с использованием "классического" CSS достаточно сложно - для этого обычно используются изображения каждого из углов. Используя CSS3, сверстать скруглённые углы очень просто. Достаточно лишь использовать нужное CSS-свойство. Скругление может применяться к каждому углу отдельно, радиус скругления, цвет легко изменяются.
Пример:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Градиенты

Использование градиентов в бордерах может быть эффективным, если использовать их правильно. Но CSS код здесь усложняется тем, что требудется определить каждый цвет градиента:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                                                           #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                                                        #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b 
                                                                       #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b 
                                                                        #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Тени

В настоящее время тени - один из "трудноверстаемых" элементов страницы. В CSS3 всё гораздо проще:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Изображения

Границы состоящие из изображений - одно из самых полезных свойств CSS3. Многие элементы дизайна верстаются гораздо проще с помощью этого метода. В CSS3 есть возможность растянуть изображение в бордере, повторять его и т.п.
CSS код:

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

В заключение

Это революция бордеров! Эти CSS3 свойства съэкономят немало времени веб-мастера. Они в значительной степени упрощают верстку многих элементов дизайна.
В следующей статье я расскажу про текстовые эффекты.

Данная статья первая из ряда статей посвящённых новому стандарту CSS3, который заменит CSS2. В ней я постараюсь рассказать что же такое CSS3, его применение в современной веб-разработке, принимая во внимание то, что большинство читателей либо не слышали о CSS3 вовсе, либо имеют очень ограниченное представление об это современной технологии. Уже сейчас многие из CSS3-приёмов уже работают в современных браузерах, в обозримом будущем CSS3 вероятно полностью заменит "классический" CSS.

Что же это такое, CSS3?

CSS3 предлагает огромное количество разнообразных методов для оптимальной верстки веб-страниц. Мои статьи дадут вам первые представления об этой технологии. В каждой из статей я буду опираться на мануалы и стандарты W3C.
Из новшеств CSS3 можно несколько модулей. Вот несколько из них:

• Блочная модель


• Списки


• Ссылки


• Границы и бэкграунды


• Текстовые эффекты

Список всех модулей

Когда всё это будет работать?

Некоторые из модулей уже завершены, например SVG (Масштабируемая векторная графика), в одной из статей я рассказывал о плагине jqPlot, который применял SVG. Большинство модулей по прежнему в процессе разработки.
Нельзя дать точной даты, когда стандарт CSS3 будет полностью работоспособен, но некоторые современные браузеры уже сейчас поддерживают некоторые CSS3 свойства.
Новые свойства будут постепенно поддерживаться браузерами, помодульно. Что, в принципе, вполне логично. Предположительно через 2-3 года большинство функций CSS3 будут поддерживаться всеми браузерами.

Как CSS3 повлияет на веб-разработку?

Будем надеяться, в основном позитивным образом. CSS3 несомненно, будет полностью обратно совместима, это значит, что не будет необходимости изменять существующие стили своих сайтов для их работоспособности при стандарте CSS3. Браузеры всегда будут поддерживать CSS2-стили. По этому поводу можно не волноваться.
С поддержкой CSS3 появится возможность использовать новые селекторы и свойства. Это позволит достичь новых конструктивных особенностей веб-страниц (например,анимация или градиент) только с помощью стилей, и усовершенствование нынешних техник верстки в сторону их упрощения (например, границы, многоколлоная верстка).
В будущих статьях этой серии я сосредоточу внимание на отдельных частях нового стандарта CSS. Следующая статья будет посвящана границам (border).

Существует множество инструментов для оптимизации изображений, которые отлично справляются со своей задачей. Но в большинстве случаев у размера картинок есть небольшой потенциал. Изображения можно сделать ещё меньше без потери качества. Для и был придуман сервис Smush.it.

Smush.it предоставляет несколько вариантов действий: Вы можете загрузить изображения через свой браузер, скормить сервису список URLов, установить Firefox плагин (YSlow), либо воспользоваться кросс-браузерным инструментом для оптимизации изображений на любой веб-странице. Вы также можете использовать WP Smush.it plugin, который автоматически оптимизирует, добавляемые в статьи, изображения.

В большинстве случаев базовый размер шрифта - 16px. Будем отталкиваться от него.

Шаг 1. Размер в пикселях

Как правило размер шрифта в 16px оказывается слишком большим. Установим размер шрифта в основном тексте в 14px, а в боковой панели - 12px.

.content p {
    font-size:14px;
}
.rightbar {
    font-size:12px;
}

Заметим что в IE6 нет никакой возможности увеличить размер шрифта, заданный в пикселях, поэтому зададим его в EM.

Шаг 2. Размер в EM'ах.

ЕM - рекомендованная W3C типографическая единица CSS. Зададим размер шрифта, аналогично тому, который мы задавали в первом шаге.

.content p {
    font-size:0.875em; /* 16x.875=14 */
}
.rightbar {
    font-size:0.75em; /* 16x0.75=12 */
}

Установка базового размера шрифта

Для чего это нужно? IE6 и IE7 при масштабировании страницы слишком сильно увеличивают текст, для исправления этого бага используем font-size: 100% в body:

body {
    font-size:100%;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Теперь всё отлично.

Высота строк текста

Чтобы текст смотрелся ещё лучше установим правильные высоты строк, т.е. межстрочное расстояние. При шрифте размером в 16px, по всем нормам типографики, высота текста должна быть около 18px. В EM это 1.125em (16×1.125=18).

body {
    font-size:100%;
    line-height:1.125em;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Все расчеты можно делать с помощью отличного инструмента.

BySlideMenu - это плагин для javascript-библиотеки Mootools, который позволяет создавать меню в виде слайдов из любого элемента, например ul/li, div, p, используя изображения и текст. С помощью BySlideMenu можно создавать как горизонтальное так и вертикальное меню + поддерживается множество эффектов.

BySlideMenu работает во всех современных браузерах, меню с помощью него могут быть очень легко реализованы на вашем сайте. Внешний вид меню вы можете настроить с помощью CSS.

Небольшой пример

HTML-разметка:

Немножко стилей:

ul.bsm{
	margin: 0px auto;
	border:1px solid #B0B0B0;
	list-style-type: none;
}

ul.bsm li{
	border-left:2px solid #FFFFFF;
}

Javascript:

window.addEvent('load', function(){
	var slideMenu = new BySlideMenu();	
});

Результат

Скрипт разработан ByScripts. Более подробную информацию вы можете найти на сайте BySlideMenu.

LiveValidation - небольшая javascript-библиотека для проверки введённых данных в поля формы. Есть в двух версиях: версия, использующая prototype.js и автономная. Обе версии были полностью протестированы на большинстве современных браузеров.

Небольшой пример

Подключаем библиотеку LiveValidation

Введите число:  <input ... >
    

Введите число: <input ... >

Всё очень просто.
Библиотеку разработал Алек Хил. Другие примеры и подробную документацию вы можете найти на сайте livevalidation.com.

Opera Unit является совершенно новой технологии, которая превратит любой компьютер или устройство, работающее с Opera 10 в веб-сервер. Это позволит вам самому создавать контент и делиться им со своими друзьями и коллегами прямо со своих компьютеров с помощью интуитивно понятного приложения Opera Unit Services.

Opera Unit позволяет пользователям легко обмениваться данными: фото, музыка, текст, файлы. Пользователь может даже запустить чат, в котором могут общаться все пользователи Opera Unit.

Разработчики могут легко создавать собственные Opera Unit сервисы, используя веб-стандарты, такие как HTML, CSS, JavaScript, SVG и AJAX. Если вы – веб-разработчик и хотите писать виджеты для Opera Unit, то узнайте об этих чудесах более подробно.

Эта статья – часть большого эксперимента, цель которого узнать, можно ли автоматически (программно) вычислить хорош или плох дизайн веб-сайта. Для опытов были выбраны сайты Apple, Microsoft, 37 Signals, YouTube и MySpace, точнее их главные страницы.

Заметим, что все изображения доступны в увеличенном виде.

Баланс

Хоть это и не является аксиомой, но хороший дизайн, как правило должен быть сбалансированным (если, конечно, идея дизайна не заключается в дисбалансе).

Мы разработали некоторые математические подходы к балансу дизайна, и в конечном итоге Бен Кэри выбрала алгоритм на основе центра масс, где масса – яркость каждого пикселя.

В результате ниже, зелёная точка – абсолютная середина страницы, красная точка – определённый нами, центр масс.

Цвета

Цвета, используемые в дизайне должны быть гармоничными, или, по крайней мере, не режущие глаза (опять же, если это не сделано целенаправлено). На круговых диаграммах показаны распределение цветов на каждой домашней странице.

В верхней таблице свет фона учтен, в нижней – нет.

Текст сайта в идеале должен следовать заранее определенной типографической иерархии, где каждый шаг в иерархии, должен быть четко дифференцирован: по размеру (по крайней мере один пиксель), стиль (например, курсив) и/или по семейству шрифтов.

Мы создали Javascript приложение, которое хранит информацию о типографике всех текстовых элементах на странице. Ниже показаны различия в типографке каждой главной страницы. Для каждого стиля вычислен процент его использования на странице (посимвольно).

Apple

Microsoft

37 Signals

YouTube

Myspace

Типографика Apple выглядит почти идеально, все стили отличаются друг от друга. С типографикой Microsoft тоже всё в порядке, но два самых крупных стиля имеют разницу меньше пикселы (эти различия могут быть обусловлены неточным CSS, однако результат один и тот же).

37 Sigbals, хотя и отдают предпочтение более большому набору стилей, в их стилях прослеживается чёткая иерархия

YouTube также хорошо прошол этот тест. Не порадовал только Myspace. В их стилях не только отсутствует чёткая иерархия, но и содержат ошибки смешивания аналогичных шрифтов (Arial и Verdana).

Источник: boxuk.com